<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Multi-calendar support (with padding) › Calendar: a Javascript class for Mootools</title>
	<script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script>
	<script type="text/javascript" src="mootools-1.2.4.2-more.js"></script>
	<script type="text/javascript" src="calendar.compat.js"></script>
	<script type="text/javascript">		
	//<![CDATA[
		window.addEvent('domready', function() { 
			myCal = new Calendar({ 
				day1: { monthyear1: 'Y-m', day1: 'd' }, 
				day2: { monthyear2: 'Y-m', day2: 'd' }, 
				day3: { monthyear3: 'Y-m', day3: 'd' }
			}, { pad: 2 });
		});
	//]]>
	</script>
	<link rel="stylesheet" type="text/css" href="iframe.css" media="screen">
	<link rel="stylesheet" type="text/css" href="calendar.css" media="screen">
</head><body>
	<h1>Multi-calendar support (with padding)</h1>

	<p>
		Applying a single Calendar instance to multiple date elements invokes the class's <strong>multi-calendar functionality</strong>.
In this mode Calendar will automatically adjust each date element to
ensure the values remain chronologically in the order they were passed
to the class. Calendar uses an optional <em>pad</em> property to calculate the minimum number of days between picked dates (default 1).

		<code>
			myCal = new Calendar({<br>
			&nbsp;&nbsp;day1: { monthyear1: 'Y-m', day1: 'd' },<br>
			&nbsp;&nbsp;day2: { monthyear2: 'Y-m', day2: 'd' },<br>
			&nbsp;&nbsp;day3: { monthyear3: 'Y-m', day3: 'd' }<br>
			}, { pad: 2 });
		</code>
	</p>

	<form action="/">
		<fieldset>
			<legend>Plan your itinerary (minimum 2 days between each date)</legend>

			<div>
				<label for="day1">Day 1</label>
				<select id="monthyear1" name="monthyear1">
					<option selected="selected" value="2008-01">January, 2008</option>
					<option value="2008-02">February, 2008</option>
					<option value="2008-03">March, 2008</option>
					<option value="2008-04">April, 2008</option>
					<option value="2008-05">May, 2008</option>
					<option value="2008-06">June, 2008</option>
					<option value="2008-07">July, 2008</option>
					<option value="2008-08">August, 2008</option>
					<option value="2008-09">September, 2008</option>
					<option value="2008-10">October, 2008</option>
					<option value="2008-11">November, 2008</option>
					<option value="2008-12">December, 2008</option>
				</select>
				<select class="calendar" id="day1" name="day1" value="01"><option selected="selected" value="01">1</option><option value="02">2</option><option value="03">3</option><option value="04">4</option><option value="05">5</option><option value="06">6</option><option value="07">7</option><option value="08">8</option><option value="09">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
			</button></div>

			<div>
				<label for="day2">Day 2</label>
				<select id="monthyear2" name="monthyear2">
					<option selected="selected" value="2008-01">January, 2008</option>
					<option value="2008-02">February, 2008</option>
					<option value="2008-03">March, 2008</option>
					<option value="2008-04">April, 2008</option>
					<option value="2008-05">May, 2008</option>
					<option value="2008-06">June, 2008</option>
					<option value="2008-07">July, 2008</option>
					<option value="2008-08">August, 2008</option>
					<option value="2008-09">September, 2008</option>
					<option value="2008-10">October, 2008</option>
					<option value="2008-11">November, 2008</option>
					<option value="2008-12">December, 2008</option>
				</select>
				<select class="calendar" id="day2" name="day2" value="03"><option value="01">1</option><option value="02">2</option><option selected="selected" value="03">3</option><option value="04">4</option><option value="05">5</option><option value="06">6</option><option value="07">7</option><option value="08">8</option><option value="09">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
			</button></div>

			<div style="margin: 0pt;">
				<label for="day3">Day 3</label>
				<select id="monthyear3" name="monthyear3">
					<option selected="selected" value="2008-01">January, 2008</option>
					<option value="2008-02">February, 2008</option>
					<option value="2008-03">March, 2008</option>
					<option value="2008-04">April, 2008</option>
					<option value="2008-05">May, 2008</option>
					<option value="2008-06">June, 2008</option>
					<option value="2008-07">July, 2008</option>
					<option value="2008-08">August, 2008</option>
					<option value="2008-09">September, 2008</option>
					<option value="2008-10">October, 2008</option>
					<option value="2008-11">November, 2008</option>
					<option value="2008-12">December, 2008</option>
				</select>
				<select class="calendar" id="day3" name="day3" value="05"><option value="01">1</option><option value="02">2</option><option value="03">3</option><option value="04">4</option><option selected="selected" value="05">5</option><option value="06">6</option><option value="07">7</option><option value="08">8</option><option value="09">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
			</div>
		</fieldset>
	</form>
<div class="calendar january" style="left: 350px; visibility: hidden; opacity: 0; position: absolute; top: 323px; z-index: 1000; display: none;"><div><table><caption><span class="month">January</span><span class="year">2008</span><a class="next">&gt;</a></caption><thead><tr><th title="Sunday">S</th><th title="Monday">M</th><th title="Tuesday">T</th><th title="Wednesday">W</th><th title="Thursday">T</th><th title="Friday">F</th><th title="Saturday">S</th></tr></thead><tbody><tr></tr><tr><td>30</td><td>31</td><td title="Tue Jan 1st 2008" class="inactive">1</td><td title="Wed Jan 2nd 2008" class="valid hilite">2</td><td title="Thu Jan 3rd 2008" class="inactive hilite">3</td><td title="Fri Jan 4th 2008" class="valid hilite">4</td><td title="Sat Jan 5th 2008" class="active">5</td></tr><tr><td title="Sun Jan 6th 2008" class="valid">6</td><td title="Mon Jan 7th 2008" class="valid">7</td><td title="Tue Jan 8th 2008" class="valid">8</td><td title="Wed Jan 9th 2008" class="valid">9</td><td title="Thu Jan 10th 2008" class="valid">10</td><td title="Fri Jan 11th 2008" class="valid">11</td><td title="Sat Jan 12th 2008" class="valid">12</td></tr><tr><td title="Sun Jan 13th 2008" class="valid">13</td><td title="Mon Jan 14th 2008" class="valid">14</td><td title="Tue Jan 15th 2008" class="valid">15</td><td title="Wed Jan 16th 2008" class="valid">16</td><td title="Thu Jan 17th 2008" class="valid">17</td><td title="Fri Jan 18th 2008" class="valid">18</td><td title="Sat Jan 19th 2008" class="valid">19</td></tr><tr><td title="Sun Jan 20th 2008" class="valid">20</td><td title="Mon Jan 21st 2008" class="valid">21</td><td title="Tue Jan 22nd 2008" class="valid">22</td><td title="Wed Jan 23rd 2008" class="valid">23</td><td title="Thu Jan 24th 2008" class="valid">24</td><td title="Fri Jan 25th 2008" class="valid">25</td><td title="Sat Jan 26th 2008" class="valid">26</td></tr><tr><td title="Sun Jan 27th 2008" class="valid">27</td><td title="Mon Jan 28th 2008" class="valid">28</td><td title="Tue Jan 29th 2008" class="valid">29</td><td title="Wed Jan 30th 2008" class="valid">30</td><td title="Thu Jan 31st 2008" class="valid">31</td><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr></tbody></table></div></div></body></html>